<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../static/dist/layui.js"></script>
    <link rel="stylesheet" href="../static/dist/css/layui.css">
    <script type="text/javascript" src="../static/dist/tableSelect.js"></script>
    <title>TableSelect</title>
    <style>
        .layui-table-cell{
            text-align:center;

            height: auto;

            white-space: normal;

        }

        .layui-table img{
            max-width:300px
        }
        .goods-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: -10px;
        }

        .layui-card {
            flex: 0 0 calc(20% - 20px);
            text-align: center;
            margin: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .layui-card:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }

        .layui-card-img-top {
            width: 100%;
            height: 200px;
            object-fit: cover;
            margin: 0 auto;
        }

        .layui-card-title {
            font-size: 14px;
            margin-top: 10px;
        }

        .layui-card-price {
            font-size: 12px;
            color: #f60;
            margin-top: 5px;
        }

        .layui-card-description {
            font-size: 12px;
            margin-top: 5px;
        }

        .layui-card-body {
            padding: 10px;
        }
    </style>
</head>

<body>
<div class="layui-row layui-bg-black" >
    <div class="layui-col-md1 layui-bg-black">
        <a href="/">
            <img src="../static/logo.png" class="layui-logo" style="height:55px">
        </a>
    </div>
  <div class="layui-col-md8 layui-bg-black">
        <form class="layui-form" action="" style="padding:11px">
            <div class="layui-form-item" style="height: 18px">
                <div class="layui-input-inline" style="width:850px">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="search">
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-warm" id="searchBtn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="layui-col-md3 layui-bg-black" >
        <ul class="layui-nav" style="padding:0px;bottom: 3px">
            {% if user %}
                <li class="layui-nav-item">
                    <a href="/user/manage"><img src="../static/yang.jpeg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/user/manage">订单信息</a></dd>
                        <dd><a href="/user/info">用户信息</a>
                        <dd><a href="/password">修改密码</a></dd>
                        <dd><a href="/loginout">退了</a></dd>
                    </dl>
                </li>
            {% else %}

                <li class="layui-nav-item">
                    <a href="">注册/登录</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/register">注册</a></dd>
                        <dd><a href="/login">登录</a></dd>
                    </dl>
                </li>
            {% endif %}
            <li class="layui-nav-item">
                <a href="/user/car">购物车</a>
            </li>
            <li class="layui-nav-item">
                <a href="/chat">客服<span class="layui-badge-dot"></span></a>
            </li>


        </ul>

    </div>
</div>

<div class="layui-row  layui-bg-cyan" style="padding: 8px">
    <div class="layui-col-md1" style="left: 20px">
        <button type="button" class="layui-btn layui-btn-xs" >
            <a href="/show/shop?type=0">全部</a>
        </button>
    </div>
    <div class="layui-col-md11" style="right: 20px">
          <span class="layui-breadcrumb" lay-separator="|">
            <a href="/show/shop?type=1">酒水饮料</a>
            <a href="/show/shop?type=2">当季水果</a>
            <a href="/show/shop?type=3">面包糕点</a>
            <a href="/show/shop?type=4">肉干卤味</a>
            <a href="/show/shop?type=5">糖果果冻</a>
            <a href="/show/shop?type=6">膨化食品</a>
            <a href="/show/shop?type=7">饼干曲奇</a>
            <a href="/show/shop?type=8">坚果炒货</a>
            <a href="/show/shop?type=9">蛋糕甜品</a>
            <a href="/show/shop?type=10">蛋挞披萨</a>
         </span>

    </div>
</div>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12" style="text-align: center;">
        </div>
    </div>
    <div class="goods-container" id="goodsList">

    </div>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>







<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../static/dist/layui.js"></script>
<script>
    $("#searchBtn").click(function() {
        var keyword = $("#search").val();
        window.location.href = "/show/search?"+"keyword="+keyword;
    });
</script>
<script type="text/javascript">
    layui.use('jquery', function(){
        var $ = layui.jquery;
        function loadGoodsByType(typeId) {
            $.ajax({
                url: "/shop/thing/" + typeId,
                type: "GET",
                success: function(response) {
                    var goodsData = response.data;
                    var goodsHtml = '';
                    for (var i = 0; i < goodsData.length; i++) {
                        var goods = goodsData[i];
                        console.log(goods)
                        goodsHtml += '<div class="layui-card">';
                        goodsHtml += '<a href="' + goods.link_url + '">';
                        goodsHtml += '<img src="' + goods.img_url + '" alt="' + goods.name + '" class="layui-card-img-top">';
                        goodsHtml += '<div class="layui-card-body">';
                        goodsHtml += '<h3 class="layui-card-title">' + goods.name + '</h3>';
                        goodsHtml += '<p class="layui-card-price">单价：¥' + goods.price + '</p>';
                        goodsHtml += '<p class="layui-card-description">' + goods.outline + '</p>';
                        goodsHtml += '</div>';
                        goodsHtml += '</a>';
                        goodsHtml += '</div>';
                    }
                    $('#goodsList').html(goodsHtml);
                },

            });
        }
        $('.layui-breadcrumb a').click(function() {
            var typeId = $(this).data('type');
            loadGoodsByType(typeId);
        });

        $(document).ready(function() {
            var url = window.location.href;
            var params = new URLSearchParams(new URL(url).search);
            var type = params.get('type');
            console.log(type)
            loadGoodsByType(type);
        })
    })
</script>
</body>
</html>
